<template>
  <v-app>
    <v-app-bar app color="primary" dark v-if="login">
      <div class="d-flex align-center">
        <!-- <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        /> -->
        <router-link to="/send">
          <v-btn href="" text>
            <v-icon>mdi-home</v-icon>
          </v-btn>
        </router-link>
      </div>

      <v-spacer></v-spacer>
      <v-btn @click='logout' text>
        <span class="mr-2">Logout</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <router-view v-bind:loginTo = "login" v-on:back="back()"></router-view>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    login: true,
  }),
  // beforeCreate(){
  //   var account = JSON.parse(localStorage.getItem('login'));
  //   if(account){
  //     this.login = true;
  //     this.$Global.phone = account.phone;
  //     this.$router.push('/send');
  //   }
  // },
  created() {
    //console.log('globalPhone',this.$Global.phone);
    var account = JSON.parse(localStorage.getItem('login'));
    if(account){
      this.$Global.phone = account.phone;
      this.$router.push('/');
    }else{
      this.login = false;
    }
  },
  methods:{
    back(){
      this.login = true;
      console.log('loginback');
    },
    logout(){
       localStorage.removeItem('login');
       this.login=false;
        this.$router.push('/login');
    }
  }
};
</script>
